import React, { Component } from "react";
import Mutil from "util/mim.jsx";
import Product from "server/product-server.jsx";

const product = new Product();
const mm = new Mutil();
import "./category-selector.scss";
class CategorySelector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstCategoryList: [],
      firstCategoryId: 0,
      secondCategoryList: [],
      secondCategoryId: 0
    };
  }
  componentDidMount() {
    this.loadFirstCategory();
  }
  componentWillReceiveProps(nextProps){
    let categoryIdChange = this.props.categoryId !== nextProps.categoryId;
    let parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId;
    // 数据没有发生变化，不做处理
    if(!categoryIdChange && !parentCategoryIdChange){
      return;
    }
    //有一级品类
    if(nextProps.parentCategoryId === 0){
      this.setState({
        firstCategoryId:nextProps.categoryId,
        secondCategoryId:0
      }) 
    }
    // 有二级品类
    else{
      this.setState({
        firstCategoryId:nextProps.parentCategoryId,
        secondCategoryId: nextProps.categoryId
      },() => {
        parentCategoryIdChange && this.loadSecondCategory();
      })
    }
  }
  //加载一级分类
  loadFirstCategory() {
    product.getCategoryList().then(
      res => {
        this.setState({
          firstCategoryList: res
        });
      },
      errMsg => {
        mm.errTips(errMsg);
      }
    );
  }
  //加载二级品类
  loadSecondCategory() {
    product.getCategoryList(this.state.firstCategoryId).then(
      res => {
        this.setState({
          secondCategoryList: res
        });
      },
      errMsg => {
        mm.errTips(errMsg);
      }
    );
  }
  // 选择一级类品
  onFirstCategoryChange(e) {
    if (this.props.readOnly) {
      return;
    }
    let newValue = e.target.value || 0;
    this.setState(
      {
        firstCategoryId: newValue,
        secondCategoryId: 0,
        secondCategoryList: []
      },
      () => {
        //更新二级品类
        this.loadSecondCategory();
        this.onPropsCategoryChange();
      }
    );
  }
  //选择二级品类
  onSecondCategoryChange(e) {
    if (this.props.readOnly) {
      return;
    }
    let newValue = e.target.value || 0;
    this.setState(
      {
        secondCategoryId: newValue
      },
      () => {
        this.onPropsCategoryChange();
      }
    );
  }
  // 传给父组件选中结果
  onPropsCategoryChange() {
    //判断props回调函数是否存在
    let categoryChangable = typeof this.props.onCategoryChange === "function";
    if (this.state.secondCategoryId) {
      // 如果有二级分类
      categoryChangable &&
        this.props.onCategoryChange(
          this.state.secondCategoryId,
          this.state.firstCategoryId
        );
    } else {
      // 如果就有一级分类
      categoryChangable &&
        this.props.onCategoryChange(this.state.firstCategoryId, 0);
    }
  }
  render() {
    return (
      <div className="col-md-5">
        <select
          className="form-control cate-select"
          onChange={e => this.onFirstCategoryChange(e)}
          readOnly={this.props.readOnly}
          value={this.state.firstCategoryId}
        >
          <option value="">其选择一级分类</option>
          {this.state.firstCategoryList.map((category, index) => (
            <option value={category.id} key={index}>
              {category.name}
            </option>
          ))}
        </select>
        {this.state.secondCategoryList.length ? (
          <select
            className="form-control cate-select"
            onChange={e => this.onSecondCategoryChange(e)}
            readOnly={this.props.readOnly}
            value={this.state.secondCategoryId}
          >
            <option value="">其选择二级分类</option>
            {this.state.secondCategoryList.map((category, index) => (
              <option value={category.id} key={index}>
                {category.name}
              </option>
            ))}
          </select>
        ) : null}
      </div>
    );
  }
}

export default CategorySelector;
